<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css}">
    <script>
        $(function () {
            //修改的回显
            $(".btn-primary").click(function (){
                    let id=$(this).val();
                    alert(id);
                    location="/update/"+id
            })

             //删除
            $(".btn-warning").click(function (){
                    let id=$(this).val();
                    alert(id);
                    if(confirm("要删除吗?")){
                        $.get(
                            "/delete/"+id,
                             function (obj){
                                if(obj){
                                    alert("删除成功");
                                    location.reload();
                                }else{
                                    alert("删除失败");
                                }
                             }
                        )
                    }
                })
        })

    </script>
</head>
<body>

    <div class="container">
     <table  class="table table-bordered table-hover">
          <tr>
              <th>id</th>
              <th>用户名</th>
              <th>生日</th>
              <th>
                  <button class="btn btn-success" onclick="location='/add'">添加</button>
              </th>
          </tr>
           <tr th:each="user:${users}" th:object="${user}">
              <td th:text="*{id}"></td>
              <td th:text="*{username}"></td>
              <td th:text="*{#dates.format(birthday,'yyyy-MM-dd')}"></td>
               <td>
                   <button class="btn btn-warning" th:value="*{id}">删除</button>
                   <button class="btn btn-primary" th:value="*{id}">修改</button>
               </td>
           </tr>
     </table>
    </div>
</body>
</html>